<template>
  <div class="seconds-box">
    <!-- 秒杀 -->
    <div class="seconds-header">
      <span>嗨购秒杀</span>
      <span>18点场</span>
      <span class="countdown-box">
        <!-- vant通过插槽自定义倒计时的样式 -->
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </span>
      <span>爆款轮番秒</span>
    </div>
    <!-- 列表 -->
    <ul class="seconds-list">
      <li v-for="item in imgs" :key="item.proid">
        <img :src="item.img1" />
        <p>¥{{ item.originprice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import service from "../../utils/service";
export default {
  data() {
    return {
      time: 2 * 60 * 60 * 1000,
      imgs: [],
    };
  },
  created() {
    service({
      url: "/api/pro/seckilllist",
      method: "get",
      params: {
        count: 1,
        limitNum: 6,
      },
    }).then((res) => {
      res.data.data.forEach((element) => {
        this.imgs.push(element);
      });
      // if (res.data.code === "200") {
      //   this.imgs = res.data.data;
      // }
    });
  },
};
</script>

<style scoped>
.seconds-box {
  width: 95%;
  height: 8.125rem;
  border-radius: 1.25rem;
  margin: 0.625rem;
  vertical-align: middle;
  background-color: #fff;
}
.seconds-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  justify-content: space-around;
  align-items: center;
  background: url()
    no-repeat center center;
  background-size: contain;
  overflow: hidden;
  font-size: 0.875rem;
}
.seconds-header > span:nth-child(2) {
  color: #ff6666;
}
.seconds-header > span:last-child {
  color: #ff6666;
}

/* 商品列表 */
.seconds-list {
  width: 100%;
  height: 5.625rem;
  display: flex;
  justify-content: space-around;
  color: #ff6666;
  font-weight: 800;
  margin-top: 10px;
}
.seconds-list img {
  width: 50px;
  height: 50px;
}
.seconds-list p {
  font-size: 12px;
  font-weight: none;
  margin: 0;
  text-align: center;
}

/* vant倒计时样式 */
.countdown-box {
  width: 140px;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 15px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
</style>